<template>
  <div>
    <div class="setting-change-box">
      <div class="setting-change-item" @click="toRuleSetting(0)">
        <div class="setting-change-img"></div>
        <div class="setting-change-center">
          <div class="setting-change-title">宿舍考核规则</div>
          <div class="setting-change-info">
            配合数字标牌使用，数字标牌会根据宿舍的评价等级和设置的显示规则显示不同颜色的灯光，用以区分每个学生宿舍的近期表现情况。
          </div>
        </div>
        <div class="setting-change-right"> > </div>
      </div>
      <div class="setting-change-item setting-change-item-second" @click="toRuleSetting(1)">
        <div class="setting-change-img"></div>
        <div class="setting-change-center">
          <div class="setting-change-title">亮灯显示规则</div>
          <div class="setting-change-info">
            配合数字标牌使用，数字标牌会根据宿舍的评价等级和设置的显示规则显示不同颜色的灯光，用以区分每个学生宿舍的近期表现情况。
          </div>
        </div>
        <div class="setting-change-right"> > </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue';
// rightOutlined
// import { SettingOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
// import { Form, Row, Col, Popover, message } from 'ant-design-vue';
import { useRouter } from 'vue-router';

// 跳转
const router = useRouter();
const toRuleSetting = type => {
  console.log('type是什么', type);
  if (type === 0) {
    router.push({
      path: 'ruleSetting'
    });
  } else {
    router.push({
      path: 'ruleSettingLamp'
    });
  }
};

onMounted(() => {});
</script>

<style lang="less" scoped>
.setting-change-box {
  .setting-change-item {
    cursor: pointer;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 16px 57px 16px 24px;
    border: 1px solid #f00;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 4px;
    .setting-change-img {
      width: 160px;
      height: 120px;
      border: 1px solid #f00;
      flex-shrink: 0;
      margin-right: 24px;
    }
    .setting-change-center {
      width: 70%;
      .setting-change-title {
        font-size: 18px;
        font-family: Source Han Sans CN, Source Han Sans CN-Medium;
        font-weight: 500;
        color: #222222;
      }
      .setting-change-info {
        font-size: 14px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        color: #999999;
        margin-top: 8px;
      }
    }
    .setting-change-right {
      flex: 1;
      text-align: right;
      color: #c2c2c2;
    }
  }
  .setting-change-item-second {
    margin-top: 20px;
  }
}
</style>
